<template>
    <!-- 车间看板 -->
    <div class="header"> 
        <span class="time" v-show='timeFlag'>最近更新: {{time}}</span>
        <span class="title">{{name}}</span>
        <el-button type="text" icon="el-icon-close" @click="exit" style="z-index: 2">退出全屏</el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                time: '',
                timeFlag: true
            }
        },
        props: ['name'],
        mounted() {
            this.loop()
        },
        methods: {
            loop() {
                const timeTimer = 1000
                this.time = new Date().dateFormat("yyyy/MM/dd hh:mm")
                window.timeTimer = setInterval(() => {
                    this.time = new Date().dateFormat("yyyy/MM/dd hh:mm")
                }, timeTimer)
            },
            timeShow() {
                this.timeFlag = false
            },
            exit(){
                document.fullscreenElement === null ? this.$router.push('/home') : document.exitFullscreen()
            }
        },
        beforeRouteLeave(to, from, next){
            clearInterval(window.timeTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .header {
        position: relative;
        width: 100%;
        height: 16%;
        min-height: 105px;
        min-width: 995px;
        background: url(~@/assets/farmBoard/KB_head.png);
        background-size: 100% 100%;
        text-align: center;
        margin-bottom: -6%;

        .time {
            position: absolute;
            left: 25px;
            top: 5px;
            font-size: 16px;
            color: #04f9fe;
        }

        .title {
            font-size: 25px;
            font-weight: 800;
            background-image: linear-gradient(#58fcff, #01a3fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /deep/ .el-button--text {
            position: absolute;
            right: 25px;
            top: -4px;
            font-size: 16px;
            color: #04f9fe;
        }
    }
</style>